<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button
            size="small"
            style="float:right"
            type="primary"
            @click="handleSearchList()">
          查询搜索
        </el-button>
        <el-button
            size="small"
            style="float:right;margin-right: 15px"
            @click="handleResetSearch()">
          重置
        </el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true" :model="listQuery" label-width="auto" size="small">
          <el-form-item label="项目名称：">
            <el-input v-model="listQuery.name" class="input-width" clearable placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="模板：">
            <el-select v-model="listQuery.template" style="width:100%">
              <el-option
                  v-for="item in allTemplateSelect"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
      <el-button class="btn-add" size="mini" style="margin-left: 20px" type="warning" @click="handleAdd()">添加
      </el-button>
    </el-card>

    <div class="table-container">
      <el-table ref="roleTable"
                v-loading="listLoading"
                :data="list"
                border style="width: 100%;">
        <el-table-column align="center" label="项目名称" prop="name">
          <template slot-scope="scope">
            <el-popover
                :disabled="!scope.row.hasTips"
                placement="top-start"
                title="提示"
                trigger="hover">
              <div>
                <div v-if="scope.row.rebootFlag">需要重启项：<span class="tips">{{ scope.row.rebootFlag }}</span>
                  <el-link style="margin-left: 10px" type="primary" @click="deleteTips(scope.row.id,'rebootFlag')">
                    删除通知
                  </el-link>
                </div>
                <div v-if="scope.row.initFlag">需要初始化项：<span class="tips">{{ scope.row.initFlag }}</span>
                  <el-link style="margin-left: 10px" type="primary" @click="deleteTips(scope.row.id,'initFlag')">
                    删除通知
                  </el-link>
                </div>
                <div v-if="scope.row.frontRebuildTable">
                  <span class="tips">前端</span>需要重新生成代码的表：<span class="tips">{{
                    scope.row.frontRebuildTable
                  }}</span>
                  <el-link style="margin-left: 10px" type="primary"
                           @click="deleteTips(scope.row.id,'frontRebuildTable')">删除通知
                  </el-link>
                </div>
                <div v-if="scope.row.backRebuildTable">
                  <span class="tips">后端</span>需要重新生成代码的表：<span class="tips">{{
                    scope.row.backRebuildTable
                  }}</span>
                  <el-link style="margin-left: 10px" type="primary"
                           @click="deleteTips(scope.row.id,'backRebuildTable')">删除通知
                  </el-link>
                </div>

                <div style="width: 100%;text-align: right;margin-top: 5px">
                  <el-button size="mini" type="danger" @click="deleteTips(scope.row.id,'all')">删除所有通知</el-button>
                </div>
              </div>
              <el-badge slot="reference" :value="(scope.row.hasTips)?'新':''" type="danger">
                <span style="padding-right: 10px">{{ scope.row.name }}</span>
              </el-badge>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column align="center" label="备注" prop="rmk" show-overflow-tooltip/>
        <el-table-column align="center" label="项目模板" prop="template" show-overflow-tooltip/>
        <el-table-column align="center" label="主数据源" prop="">
          <template slot-scope="scope">
            <span style="color: blue;text-decoration: underline;cursor: pointer"
                  @click="jumpToDatasource(scope.row.datasourceId)">{{
                (scope.row.projectDatasource || {}).remark
              }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="已选组件" prop="">
          <template slot-scope="scope">
            <div v-for="item in scope.row.additionComponentArr">
              <span>{{ item }} - </span>
              <span>{{ allTemplateDesc[scope.row.template].additionJson[item] }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="初始化" prop="" width="120">
          <template slot="header">
            <span style="margin-right: 5px">初始化</span>
            <el-tooltip content="生成前后端项目的基础框架，初始化数据库等" effect="light" placement="top">
              <i class="el-icon-question" style="cursor: pointer; color: #999;"></i>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <el-popover
                placement="top-start"
                title="请选择"
                trigger="hover">
              <div style="width: 300px">
                <div v-if="scope.row.initFlag" style="margin-bottom: 10px;border-bottom: solid 1px #eee">
                  <div style="color: red">配置有改动，需重新初始化{{ scope.row.initFlag }}</div>
                </div>
                <el-form>
                  <el-form-item label="初始化配置：">
                    <el-checkbox-group v-model="initExtendTableSelect" size="medium">
                      <el-checkbox key="initExtendTable" label="initExtendTable">同时初始化自定义的表
                        <el-tooltip
                            content="如勾选，数据库中除模板内置以外的表，也会同时初始化（多数据源时，只初始化主数据源的表）"
                            effect="light"
                                    placement="top">
                          <i class="el-icon-question" style="cursor: pointer; color: #999;"></i>
                        </el-tooltip>
                      </el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                  <el-form-item label="初始化类型：">
                    <el-checkbox-group v-model="initProjectType" size="medium">
                      <el-checkbox key="frontendProject" label="frontendProject">前端</el-checkbox>
                      <el-checkbox key="backendProject" label="backendProject">后端</el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-form>
                <div style="width: 100%;text-align: right">
                  <el-button :disabled="initProjectType.length<=0" :loading="listLoading"
                             size="mini"
                             style="margin-left: 10px" type="primary"
                             @click="handleInitProjectType(scope.row.id)">
                    确定
                  </el-button>
                </div>

              </div>
              <el-badge slot="reference" :value="(scope.row.initFlag)?'新':''" type="danger">
                <el-button size="mini" type="primary">初始化</el-button>
              </el-badge>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column v-if="false" align="center" label="菜单管理" prop="" width="120">
          <template slot="header">
            <span style="margin-right: 5px">菜单管理</span>
            <el-tooltip content="初始化前端系统的菜单" effect="light" placement="top">
              <i class="el-icon-question" style="cursor: pointer; color: #999;"></i>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <el-button :loading="listLoading" size="mini"
                       type="primary"
                       @click="handleCreateMenu(scope.row.id)">
              编辑菜单
            </el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" label="删除备份文件" prop="" width="130">
          <template slot="header">
            <span style="margin-right: 5px">删除备份文件</span>
            <el-tooltip content="删除项目中所有的.bak备份文件" effect="light" placement="top">
              <i class="el-icon-question" style="cursor: pointer; color: #999;"></i>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <el-popover
                placement="top-start"
                title="请选择"
                trigger="hover">
              <div style="width: 200px">
                <el-checkbox-group v-model="initProjectType" size="medium">
                  <el-checkbox key="frontendProject" label="frontendProject">前端</el-checkbox>
                  <el-checkbox key="backendProject" label="backendProject">后端</el-checkbox>
                  <el-button :disabled="initProjectType.length<=0" :loading="listLoading"
                             size="mini"
                             style="margin-left: 10px" type="danger"
                             @click="handleDeleteBakFile(scope.row)">
                    确定
                  </el-button>
                </el-checkbox-group>
              </div>
              <el-button slot="reference" size="mini" type="danger">删除备份文件</el-button>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="250">
          <template slot-scope="scope">
            <el-button size="mini"
                       type="success"
                       @click="handleUpdate('show', scope.row)">
              查看
            </el-button>
            <el-button size="mini"
                       type="primary"
                       @click="handleUpdate('edit', scope.row)">
              编辑
            </el-button>
            <el-button size="mini"
                       type="danger"
                       @click="handleDelete(scope.$index, scope.row.id)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
          :current-page.sync="listQuery.current"
          :page-size="listQuery.pageSize"
          :page-sizes="[5,10,15]"
          :total="total"
          background
          layout="total, sizes,prev, pager, next,jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <el-dialog :visible.sync="editDialogVisible"
               :title="editOrShow==='edit'?'编辑项目配置':'查看项目配置'"
               width="60%">
      <el-card class="operate-container" shadow="never">
        <span style="font-weight: bold">项目信息</span>
        <el-form ref="addProjectForm" :model="project"
                 :rules="addProjectRules" label-width="auto"
                 size="small" style="width: 90%;margin: 0 auto">
          <el-form-item label="项目模板：" prop="template">
            <el-select v-model="project.template" :disabled="editOrShow==='show'" style="width:100%">
              <el-option
                  v-for="item in allTemplateSelect"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="项目名称：" prop="name">
            <el-input v-model="project.name" :readonly="editOrShow==='show'"></el-input>
          </el-form-item>
          <el-form-item label="项目描述：" prop="rmk">
            <el-input v-model="project.rmk" :readonly="editOrShow==='show'"></el-input>
          </el-form-item>
          <el-form-item label="主数据源：" prop="datasourceId">
            <el-select v-model="project.datasourceId" :disabled="editOrShow==='show'" clearable filterable
                       style="width:100%">
              <el-option
                  v-for="item in datasourceOption"
                  :key="item.id"
                  :label="item.remark"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="allTemplateDesc[project.template] && allTemplateDesc[project.template].supportMutilDatasource == '1'" label="副数据源："
                        prop="mutilDatasourceId">
            <el-select v-model="project.mutilDatasourceId" :disabled="editOrShow==='show'" clearable filterable
                       multiple style="width:100%">
              <el-option
                  v-for="item in datasourceOption"
                  :key="item.id"
                  :label="item.remark"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
              v-if="project.template && allTemplateDesc[project.template].addition && allTemplateDesc[project.template].addition.length > 0"
              label="模板组件：">
            <el-select v-model="project.additionComponentArr" :disabled="editOrShow==='show'" multiple
                       style="width:100%">
              <el-option
                  v-for="item in allTemplateDesc[project.template].addition"
                  :key="item.name"
                  :label="item.desc"
                  :value="item.name">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-card>

      <el-card class="operate-container" shadow="never">
        <span style="font-weight: bold">后端项目信息</span>
        <el-form ref="addBackendProjectForm" :model="backendProject"
                 :rules="addBackendProjectRules"
                 label-width="auto" size="small">
          <el-form-item prop="projectName">
            <template #label>
              <span>
                项目名称：
                <el-tooltip effect="light" placement="bottom">
                  <template #content>
                    后端项目的文件夹名称
                  </template>
                  <i class="el-icon-question"/>
                </el-tooltip>
              </span>
            </template>
            <el-input :readonly="editOrShow==='show'" v-model="backendProject.projectName"></el-input>
          </el-form-item>
          <el-form-item label="端口：" prop="projectPort">
            <el-input :readonly="editOrShow==='show'" type="number" v-model="backendProject.projectPort"
                      @change="autoCompleteFrontendProjectBaseUrl"></el-input>
          </el-form-item>
          <el-form-item label="" prop="projectGroup">
            <template #label>
              <span>
                项目组织：
                <el-tooltip effect="light" placement="bottom">
                  <template #content>
                    如com.example.demo
                  </template>
                  <i class="el-icon-question"/>
                </el-tooltip>
              </span>
            </template>
            <el-input :readonly="editOrShow==='show'" v-model="backendProject.projectGroup"></el-input>
          </el-form-item>
          <el-form-item prop="projectDir">
            <template #label>
              <span>
                项目路径：
                <el-tooltip effect="light" placement="bottom">
                  <template #content>
                    在哪里创建项目，必须由\结尾，系统会自动拼上项目名称。如填写C:\Users\Dell\Desktop\project\
                  </template>
                  <i class="el-icon-question"/>
                </el-tooltip>
              </span>
            </template>
            <el-input :readonly="editOrShow==='show'" v-model="backendProject.projectDir"
                      @change="autoAppendSuffix('backendProject')">
              <template #append>{{ backendProject.projectName }}</template>
            </el-input>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="operate-container" shadow="never">
        <span style="font-weight: bold">前端项目信息</span>
        <el-form ref="addFrontendProjectForm" :model="frontendProject"
                 :rules="addFrontendProjectRules"
                 label-width="auto" size="small">
          <el-form-item prop="projectName">
            <template #label>
              <span>
                项目名称：
                <el-tooltip effect="light" placement="bottom">
                  <template #content>
                    前端项目的文件夹名称,建议以xxxUI结尾
                  </template>
                  <i class="el-icon-question"/>
                </el-tooltip>
              </span>
            </template>
            <el-input :readonly="editOrShow==='show'" v-model="frontendProject.projectName"></el-input>
          </el-form-item>
          <el-form-item label="端口：" prop="projectPort">
            <el-input :readonly="editOrShow==='show'" type="number" v-model="frontendProject.projectPort"></el-input>
          </el-form-item>
          <el-form-item label="项目路径：" prop="projectDir">
            <template #label>
              <span>
                项目路径：
                <el-tooltip effect="light" placement="bottom">
                  <template #content>
                    在哪里创建项目，必须由\结尾，系统会自动拼上项目名称。如填写C:\Users\Dell\Desktop\project\
                  </template>
                  <i class="el-icon-question"/>
                </el-tooltip>
              </span>
            </template>
            <el-input :readonly="editOrShow==='show'" v-model="frontendProject.projectDir"
                      @change="autoAppendSuffix('frontendProject')">
              <template #append>{{ frontendProject.projectName }}</template>
            </el-input>
          </el-form-item>
          <el-form-item label="后台地址：" prop="baseUrl">
            <template #label>
              <span>
                后台地址：
                <el-tooltip effect="light" placement="bottom">
                  <template #content>
                    前端项目访问后台地址，如http://127.0.0.1:8080/
                  </template>
                  <i class="el-icon-question"/>
                </el-tooltip>
              </span>
            </template>
            <el-input :readonly="editOrShow==='show'" v-model="frontendProject.baseUrl"
                      @change="autoAppendSuffix('baseUrl')"
                      @input="forceUpdateElement"></el-input>
          </el-form-item>
        </el-form>
      </el-card>
      <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="editDialogVisible = false">取 消</el-button>
          <el-button :loading="btnLoading" size="small" type="primary"
                     @click="handleEditDialogConfirm()">确 定</el-button>
        </span>
    </el-dialog>

    <el-dialog :visible.sync="addDialogVisible"
               title="新增项目配置"
               width="60%">
      <el-card class="operate-container" shadow="never">
        <span style="font-weight: bold">项目信息</span>
        <el-form ref="addProjectForm" :model="project"
                 :rules="addProjectRules" label-width="auto"
                 size="small" style="width: 90%;margin: 0 auto">
          <el-form-item label="项目模板：" prop="template">
            <el-select v-model="project.template" style="width:100%">
              <el-option
                  v-for="item in allTemplateSelect"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="项目名称：" prop="name">
            <el-input v-model="project.name"></el-input>
          </el-form-item>
          <el-form-item label="项目描述：" prop="rmk">
            <el-input v-model="project.rmk"></el-input>
          </el-form-item>
          <el-form-item label="主数据源：" prop="datasourceId">
            <el-select v-model="project.datasourceId" clearable filterable style="width:100%">
              <el-option
                  v-for="item in datasourceOption"
                  :key="item.id"
                  :label="item.remark"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="allTemplateDesc[project.template] && allTemplateDesc[project.template].supportMutilDatasource == '1'" label="副数据源："
                        prop="mutilDatasourceId">
            <el-select v-model="project.mutilDatasourceId" clearable filterable multiple style="width:100%">
              <el-option
                  v-for="item in datasourceOption"
                  :key="item.id"
                  :label="item.remark"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
              v-if="project.template && allTemplateDesc[project.template].addition && allTemplateDesc[project.template].addition.length > 0"
              label="模板组件：">
            <el-select v-model="project.additionComponentArr" multiple style="width:100%">
              <el-option
                  v-for="item in allTemplateDesc[project.template].addition"
                  :key="item.name"
                  :label="item.desc"
                  :value="item.name">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-card>

      <el-card class="operate-container" shadow="never">
        <span style="font-weight: bold">后端项目信息</span>
        <el-form ref="addBackendProjectForm" :model="backendProject"
                 :rules="addBackendProjectRules"
                 label-width="auto" size="small">
          <el-form-item prop="projectName">
            <template #label>
              <span>
                项目名称：
                <el-tooltip effect="light" placement="bottom">
                  <template #content>
                    后端项目的文件夹名称
                  </template>
                  <i class="el-icon-question"/>
                </el-tooltip>
              </span>
            </template>
            <el-input v-model="backendProject.projectName"></el-input>
          </el-form-item>
          <el-form-item label="端口：" prop="projectPort">
            <el-input type="number" v-model="backendProject.projectPort"
                      @change="autoCompleteFrontendProjectBaseUrl"></el-input>
          </el-form-item>
          <el-form-item label="" prop="projectGroup">
            <template #label>
              <span>
                项目组织：
                <el-tooltip effect="light" placement="bottom">
                  <template #content>
                    如com.example.demo
                  </template>
                  <i class="el-icon-question"/>
                </el-tooltip>
              </span>
            </template>
            <el-input v-model="backendProject.projectGroup"></el-input>
          </el-form-item>
          <el-form-item prop="projectDir">
            <template #label>
              <span>
                项目路径：
                <el-tooltip effect="light" placement="bottom">
                  <template #content>
                    在哪里创建项目，必须由\结尾，系统会自动拼上项目名称。如填写C:\Users\Dell\Desktop\project\
                  </template>
                  <i class="el-icon-question"/>
                </el-tooltip>
              </span>
            </template>
            <el-input v-model="backendProject.projectDir" @change="autoAppendSuffix('backendProject')">
              <template #append>{{ backendProject.projectName }}</template>
            </el-input>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="operate-container" shadow="never">
        <span style="font-weight: bold">前端项目信息</span>
        <el-form ref="addFrontendProjectForm" :model="frontendProject"
                 :rules="addFrontendProjectRules"
                 label-width="auto" size="small">
          <el-form-item prop="projectName">
            <template #label>
              <span>
                项目名称：
                <el-tooltip effect="light" placement="bottom">
                  <template #content>
                    前端项目的文件夹名称,建议以xxxUI结尾
                  </template>
                  <i class="el-icon-question"/>
                </el-tooltip>
              </span>
            </template>
            <el-input v-model="frontendProject.projectName"></el-input>
          </el-form-item>
          <el-form-item label="端口：" prop="projectPort">
            <el-input type="number" v-model="frontendProject.projectPort"></el-input>
          </el-form-item>
          <el-form-item label="项目路径：" prop="projectDir">
            <template #label>
              <span>
                项目路径：
                <el-tooltip effect="light" placement="bottom">
                  <template #content>
                    在哪里创建项目，必须由\结尾，系统会自动拼上项目名称。如填写C:\Users\Dell\Desktop\project\
                  </template>
                  <i class="el-icon-question"/>
                </el-tooltip>
              </span>
            </template>
            <el-input v-model="frontendProject.projectDir" @change="autoAppendSuffix('frontendProject')">
              <template #append>{{ frontendProject.projectName }}</template>
            </el-input>
          </el-form-item>
          <el-form-item label="后台地址：" prop="baseUrl">
            <template #label>
              <span>
                后台地址：
                <el-tooltip effect="light" placement="bottom">
                  <template #content>
                    前端项目访问后台地址，如http://127.0.0.1:8080/
                  </template>
                  <i class="el-icon-question"/>
                </el-tooltip>
              </span>
            </template>
            <el-input v-model="frontendProject.baseUrl" @change="autoAppendSuffix('baseUrl')"
                      @input="forceUpdateElement"></el-input>
          </el-form-item>
        </el-form>
      </el-card>
      <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="addDialogVisible = false">取 消</el-button>
          <el-button :loading="btnLoading" size="small" type="primary"
                     @click="handleAddDialogConfirm()">确 定</el-button>
        </span>
    </el-dialog>

    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="menuDialogVisible"
               fullscreen title="菜单配置">
      <el-button class="btn-add" size="mini" style="margin-left: 20px" type="warning" @click="handleAddMenu()">
        添加
      </el-button>
      <el-table
          v-loading="menuLoading"
          :data="allMenuTree"
          :expand-row-keys="['1']"
          :row-key="(row)=>{return row.id}"
          :tree-props="{
          children: 'children',
          hasChildren: 'hasChildren',
        }"
          highlight-current-row
      >
        <el-table-column label="菜单名称">
          <template #default="scope">
            <template v-if="scope.row.icon && scope.row.type != 4">
              <template v-if="scope.row.icon.startsWith('el-icon-')">
                <i :class="scope.row.icon"></i>
              </template>
              <template v-else>
                <svg-icon :icon-class="scope.row.icon"></svg-icon>
              </template>
            </template>
            {{ scope.row.name }}
          </template>
        </el-table-column>

        <el-table-column align="center" label="类型" width="80">
          <template #default="scope">
            <el-tag v-if="scope.row.type === '2'" type="warning">目录</el-tag>
            <el-tag v-if="scope.row.type === '1'" type="success">菜单</el-tag>
            <el-tag v-if="scope.row.type === '4'" type="danger">按钮</el-tag>
            <el-tag v-if="scope.row.type === '3'" type="info">外链</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="left" label="路由路径" prop="path"/>
        <el-table-column align="left" label="组件路径" prop="component"/>
        <el-table-column align="center" label="权限标识" prop="perm"/>
        <el-table-column align="center" label="状态" width="80">
          <template #default="scope">
            <el-tag v-if="scope.row.visible === '1'" type="success">显示</el-tag>
            <el-tag v-else type="info">隐藏</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="排序" prop="sort" width="80"/>

        <el-table-column align="center" fixed="right" label="操作" width="220">
          <template #default="scope">
            <el-link v-if="scope.row.type === '1' || scope.row.type === '2'" icon="el-icon-plus"
                     type="primary" @click.stop="handleAddMenu(scope.row)">新增
            </el-link>
            <el-link icon="el-icon-edit"
                     style="margin: 0 10px" type="primary" @click.stop="handleUpdateMenu(scope.row)">编辑
            </el-link>
            <el-link icon="el-icon-delete"
                     type="danger" @click.stop="handleDeleteMenu(scope.row)">删除
            </el-link>
          </template>
        </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">
           <el-button size="small" @click="menuDialogVisible = false">返 回</el-button>
        </span>
    </el-dialog>

    <el-dialog :visible.sync="editMenuDialogVisible"
               title="编辑菜单管理" width="60%"
               @close="handleDialogClose('editDialogRef')">
      <el-form ref="editDialogRef" :model="sysMenu"
               :rules="menuFormRule" label-suffix="："
               label-width="auto" size="small">
        <el-form-item label="菜单名称">
          <el-input v-model="sysMenu.name" :clearable="false" maxlength="64" placeholder="请输入"
                    show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="菜单类型">
          <el-radio-group v-model="sysMenu.type" :disabled="sysMenu.parentId == '0'">
            <el-radio label="2">目录</el-radio>
            <el-radio label="1">菜单</el-radio>
            <el-radio label="4">按钮</el-radio>
            <el-radio label="3">外链</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="sysMenu.type != '3'">
          <template #label>
            <span>
              路由路径
              <el-tooltip effect="light" placement="bottom">
                <template #content>
                  定义应用中不同页面对应的 URL 路径，目录需以 /
                  开头，菜单项不用。例如：系统管理目录
                  /system，系统管理下的用户管理菜单 user。
                </template>
                <i class="el-icon-question"/>
              </el-tooltip>
            </span>
          </template>
          <el-input v-model="sysMenu.path" clearable maxlength="128" placeholder="请输入" show-word-limit></el-input>
        </el-form-item>
        <el-form-item v-if="sysMenu.type == '1'">
          <template #label>
            <span>
              组件路径
              <el-tooltip effect="light" placement="bottom">
                <template #content>
                  组件页面完整路径，相对于 src/views/，如
                  system/user/index，缺省后缀 .vue
                </template>
                <i class="el-icon-question"/>
              </el-tooltip>
            </span>
          </template>
          <el-input v-model="sysMenu.component" clearable maxlength="128" placeholder="请输入"
                    show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="权限标识">
          <el-input v-model="sysMenu.perm" clearable maxlength="128" placeholder="请输入" show-word-limit></el-input>
        </el-form-item>
        <el-form-item v-if="sysMenu.type == '1' || sysMenu.type == '2'">
          <template #label>
            <span>
              始终显示
              <el-tooltip effect="light" placement="bottom">
                <template #content>
                  当设置为始终显示时，即使只有一个子菜单也会显示<br/>
                  叶子节点的菜单，请选择“否”。
                </template>
                <i class="el-icon-question"/>
              </el-tooltip>
            </span>
          </template>
          <el-radio-group v-model="sysMenu.alwaysShow">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="sysMenu.type == '1'" label="页面缓存">
          <el-radio-group v-model="sysMenu.keepAlive">
            <el-radio label="1">开启</el-radio>
            <el-radio label="0">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="sysMenu.type != '4'" label="显示状态">
          <el-radio-group v-model="sysMenu.visible">
            <el-radio label="1">显示</el-radio>
            <el-radio label="0">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number
              v-model="sysMenu.sort"
              :min="0"
              controls-position="right"
              style="width: 100px"
          />
        </el-form-item>
        <el-form-item v-if="sysMenu.type != '4'" label="菜单图标">
          <iconPicker :init-icon="sysMenu.icon" width="100%" @onSelect="onIconSelect"></iconPicker>
        </el-form-item>
        <el-form-item label="外链地址">
          <el-input v-model="sysMenu.redirect" clearable maxlength="128" placeholder="请输入"
                    show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="路由参数">
          <el-input v-model="sysMenu.params" clearable placeholder="请输入"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="editMenuDialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="handleEditMenuDialogConfirm()">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog :visible.sync="addMenuDialogVisible"
               title="新增菜单管理" width="60%"
               @close="handleDialogClose('addDialogRef')">
      <el-form ref="addDialogRef" :model="sysMenu"
               :rules="menuFormRule" label-suffix="："
               label-width="auto" size="small">
        <el-form-item label="菜单名称">
          <el-input v-model="sysMenu.name" :clearable="false" maxlength="64" placeholder="请输入"
                    show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="菜单类型">
          <el-radio-group v-model="sysMenu.type" :disabled="sysMenu.parentId == '0'">
            <el-radio label="2">目录</el-radio>
            <el-radio label="1">菜单</el-radio>
            <el-radio label="4">按钮</el-radio>
            <el-radio label="3">外链</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="sysMenu.type != '3'">
          <template #label>
            <span>
              路由路径
              <el-tooltip effect="light" placement="bottom">
                <template #content>
                  定义应用中不同页面对应的 URL 路径，目录需以 /
                  开头，菜单项不用。例如：系统管理目录
                  /system，系统管理下的用户管理菜单 user。
                </template>
                <i class="el-icon-question"/>
              </el-tooltip>
            </span>
          </template>
          <el-input v-model="sysMenu.path" clearable maxlength="128" placeholder="请输入" show-word-limit></el-input>
        </el-form-item>

        <el-form-item v-if="sysMenu.type == '1'">
          <template #label>
            <span>
              组件路径
              <el-tooltip effect="light" placement="bottom">
                <template #content>
                  组件页面完整路径，相对于 src/views/，如
                  system/user/index，缺省后缀 .vue
                </template>
                <i class="el-icon-question"/>
              </el-tooltip>
            </span>
          </template>
          <el-input v-model="sysMenu.component" clearable maxlength="128" placeholder="请输入"
                    show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="权限标识">
          <el-input v-model="sysMenu.perm" clearable maxlength="128" placeholder="请输入" show-word-limit></el-input>
        </el-form-item>
        <el-form-item v-if="sysMenu.type == '1' || sysMenu.type == '2'">
          <template #label>
            <span>
              始终显示
              <el-tooltip effect="light" placement="bottom">
                <template #content>
                  当设置为始终显示时，即使只有一个子菜单也会显示<br/>
                  叶子节点的菜单，请选择“否”。
                </template>
                <i class="el-icon-question"/>
              </el-tooltip>
            </span>
          </template>
          <el-radio-group v-model="sysMenu.alwaysShow">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="sysMenu.type == '1'" label="页面缓存">
          <el-radio-group v-model="sysMenu.keepAlive">
            <el-radio label="1">开启</el-radio>
            <el-radio label="0">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="sysMenu.type != '4'" label="显示状态">
          <el-radio-group v-model="sysMenu.visible">
            <el-radio label="1">显示</el-radio>
            <el-radio label="0">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number
              v-model="sysMenu.sort"
              :min="0"
              controls-position="right"
              style="width: 100px"
          />
        </el-form-item>
        <el-form-item v-if="sysMenu.type != '4'" label="菜单图标">
          <iconPicker :init-icon="sysMenu.icon" width="100%" @onSelect="onIconSelect"></iconPicker>
        </el-form-item>
        <el-form-item label="外链地址">
          <el-input v-model="sysMenu.redirect" clearable maxlength="128" placeholder="请输入"
                    show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="路由参数">
          <el-input v-model="sysMenu.params" clearable placeholder="请输入"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="addMenuDialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="handleMenuAddDialogConfirm()">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import {projectPostRequire} from '@/api/project'
import iconPicker from "@/components/iconPicker/index.vue";
import {projectDatasourcePostRequire} from "../../api/projectDatasource";
import {templateConfigPostRequire} from "../../api/templateConfig";
import {projectConfigRecordPostRequire} from "../../api/projectConfigRecord";

const defaultListQuery = {
  current: 1,
  pageSize: 10,
  name: undefined,
  template: undefined
}
const defaultProject = {
  id: undefined,
  name: undefined,
  rmk: undefined,
  datasourceId: undefined,
  mutilDatasourceId: undefined,
  template: undefined,
  additionComponent: undefined,
  additionComponentArr: [],
}
const defaultFrontendProject = {
  projectName: undefined,
  projectPort: undefined,
  projectDir: undefined,
  baseUrl: undefined,
  type: '0',
}
const defaultBackendProject = {
  projectName: undefined,
  projectPort: undefined,
  projectGroup: 'com.example',
  projectDir: undefined,
  type: '1',
}

const defaultSysMenu = {
  redirect: undefined,
  keepAlive: undefined,
  visible: '1',
  perm: undefined,
  icon: undefined,
  updateTime: undefined,
  sort: '0',
  type: '1',
  params: undefined,
  parentId: undefined,
  path: undefined,
  component: undefined,
  createTime: undefined,
  name: undefined,
  id: undefined,
  alwaysShow: undefined,
  treePath: undefined,
}
export default {
  name: 'projectList',
  components: {iconPicker},
  data() {
    return {
      initProjectType: ['backendProject', 'frontendProject'],
      initExtendTableSelect: ['initExtendTable'],
      sysMenu: this.$deepClone(defaultSysMenu),

      allTemplateDesc: {},
      allTemplateSelect: [],

      datasourceOption: [],
      listQuery: this.$deepClone(defaultListQuery),
      list: null,
      total: null,
      listLoading: false,
      menuLoading: false,
      addDialogVisible: false,
      editDialogVisible: false,
      menuDialogVisible: false,
      editMenuDialogVisible: false,
      addMenuDialogVisible: false,
      allMenuTree: [],
      menuFormRule: {
        name: [{required: true, message: "请输入菜单名称", trigger: 'blur'}],
        type: [{required: true, message: "请选择菜单类型", trigger: 'blur'}],
        visible: [{required: true, message: "请选择显示状态", trigger: 'blur'}],
      },
      addProjectRules: {
        name: [{required: true, message: '请输入项目名称', trigger: 'blur'},
          {min: 1, max: 255, message: '长度在 1 到 255 个字符', trigger: 'blur'},
        ],
        datasourceId: [{required: true, message: '请选择数据源', trigger: 'blur'},],
        template: [{required: true, message: '请选择模板', trigger: 'blur'}]
      },
      addBackendProjectRules: {
        projectName: [{required: true, message: '请输入项目名称', trigger: 'blur'},
          {min: 1, max: 255, message: '长度在 1 到 255 个字符', trigger: 'blur'},
        ],
        projectPort: [{required: true, message: '请输入项目端口', trigger: 'blur'},
          {min: 1, max: 65535, message: '长度在 1 到 65535 个字符', trigger: 'blur'},
        ],
        projectGroup: [{required: true, message: '请输入项目组名', trigger: 'blur'},
          {min: 1, max: 255, message: '长度在 1 到 255 个字符', trigger: 'blur'},
        ],
        projectDir: [{required: true, message: '请输入项目目录', trigger: 'blur'},
          {min: 1, max: 255, message: '长度在 1 到 255 个字符', trigger: 'blur'},
        ],
      },
      addFrontendProjectRules: {
        projectName: [{required: true, message: '请输入项目名称', trigger: 'blur'},
          {min: 1, max: 255, message: '长度在 1 到 255 个字符', trigger: 'blur'},
        ],
        projectPort: [{required: true, message: '请输入项目端口', trigger: 'blur'},
          {min: 1, max: 65535, message: '长度在 1 到 65535 个字符', trigger: 'blur'},
        ],
        projectDir: [{required: true, message: '请输入项目目录', trigger: 'blur'},
          {min: 1, max: 255, message: '长度在 1 到 255 个字符', trigger: 'blur'},
        ],
        baseUrl: [{required: true, message: '请输入后台项目地址', trigger: 'blur'},
          {min: 1, max: 255, message: '长度在 1 到 255 个字符', trigger: 'blur'},
        ],
      },
      project: this.$deepClone(defaultProject),
      backendProject: this.$deepClone(defaultBackendProject),
      frontendProject: this.$deepClone(defaultFrontendProject),
      editOrShow: 'edit',
      btnLoading: false,
      selectProjectId: undefined
    }
  },
  created() {
    this.getList()
    this.getDatasourceList()
    this.getAllTemplate()
  },
  methods: {
    handleInitProjectType(id) {
      let initProjectType = this.initProjectType || []
      if (initProjectType.length > 0) {
        let type = initProjectType.join(",")
        let initExtendTableSelect = this.initExtendTableSelect || []
        let initExtendTable = initExtendTableSelect.length > 0
        let tips = ''
        if (initProjectType.includes("backendProject")) {
          tips = '【后端】'
        }
        if (initProjectType.includes("frontendProject")) {
          tips += '【前端】'
        }
        this.$confirm('确定生成' + tips + '项目', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.listLoading = true
          projectPostRequire('initAllProject', {
            id: id,
            type: type,
            initExtendTable: initExtendTable
          }).then(response => {
            if (response) {
              this.listLoading = false
              this.$message({
                type: response.status ? 'success' : 'error',
                message: response.message
              })
              this.getList()
            }
          })
        })
      } else {
        this.$message({
          type: 'warning',
          message: '请先选择初始化对象'
        })
      }
    },
    handleDeleteBakFile(row) {
      let initProjectType = this.initProjectType || []
      let tips = ''
      if (initProjectType.length > 0) {
        let params = {}
        if (initProjectType.includes("backendProject")) {
          params.backendProjectId = row.backendProject.id
          tips = '【后端】'
        }
        if (initProjectType.includes("frontendProject")) {
          params.frontendProjectId = row.frontendProject.id
          tips += '【前端】'
        }
        this.$confirm('是否要删除该项目' + tips + '所有备份文件?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.listLoading = true
          projectPostRequire('clearAllBakFile', params).then(response => {
            if (response) {
              this.$message({
                type: response.status ? 'success' : 'error',
                message: response.message
              })
            }
          }).finally(() => {
            this.listLoading = false
          })
        })
      } else {
        this.$message({
          type: 'warning',
          message: '请先选择删除对象'
        })
      }
    },
    autoCompleteFrontendProjectBaseUrl() {
      if (this.backendProject.projectPort && !this.frontendProject.baseUrl) {
        this.frontendProject.baseUrl = "http://127.0.0.1:" + this.backendProject.projectPort + "/"
        this.forceUpdateElement()
      }
    },
    autoAppendSuffix(type) {
      if (type === 'backendProject') {
        if (this.backendProject.projectDir && (!this.backendProject.projectDir.endsWith("\\") && !this.backendProject.projectDir.endsWith("/"))) {
          this.backendProject.projectDir = this.backendProject.projectDir + "\\"
        }
      } else if (type === 'frontendProject') {
        if (this.frontendProject.projectDir && (!this.frontendProject.projectDir.endsWith("\\") && !this.frontendProject.projectDir.endsWith("/"))) {
          this.frontendProject.projectDir = this.frontendProject.projectDir + "\\"
        }
      } else if (type === 'baseUrl') {
        if (this.frontendProject.baseUrl && (!this.frontendProject.baseUrl.endsWith("\\") && !this.frontendProject.baseUrl.endsWith("/"))) {
          this.frontendProject.baseUrl = this.frontendProject.baseUrl + "/"
        }
      }
    },
    forceUpdateElement() {
      this.$forceUpdate()
    },
    jumpToDatasource(id) {
      this.$router.push({path: '/datasource/database', query: {id: id}})
    },

    handleAddMenu(parent) {
      this.sysMenu = this.$deepClone(defaultSysMenu)
      if (parent) {
        this.sysMenu.parentId = parent.id
        this.sysMenu.treePath = parent.treePath + "," + parent.id
      } else {
        this.sysMenu.parentId = '0'
        this.sysMenu.treePath = '0'
        this.sysMenu.type = '2'
      }
      this.addMenuDialogVisible = true
    },
    onIconSelect(icon) {
      this.sysMenu.icon = icon
    },
    handleMenuAddDialogConfirm() {
      this.$refs.addDialogRef.validate((valid) => {
        if (valid) {
          this.sysMenu.projectId = this.selectProjectId
          this.sysMenu.children = undefined
          projectPostRequire('addSpringBootProjectMenu', this.sysMenu).then(response => {
            if (response) {
              this.$message({
                message: response.message,
                type: response.status ? 'success' : 'error'
              })
            }
            this.addMenuDialogVisible = false
          }).finally(() => {
            this.fetchProjectMenu()
          })
        }
      });
    },
    handleDeleteMenu(row) {
      this.$confirm('是否要删除该菜单管理?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        projectPostRequire('deleteSpringBootProjectMenu', {
          'menuId': row.id,
          'projectId': this.selectProjectId
        }).then(response => {
          if (response) {
            this.$message({
              message: response.message,
              type: response.status ? 'success' : 'error'
            })
          }
        }).finally(() => {
          this.fetchProjectMenu()
        })
      })
    },
    handleUpdateMenu(row) {
      this.editMenuDialogVisible = true
      this.sysMenu = this.$deepClone(row)
    },
    handleEditMenuDialogConfirm() {
      this.$refs.editDialogRef.validate((valid) => {
        if (valid) {
          this.sysMenu.projectId = this.selectProjectId
          this.sysMenu.children = undefined
          projectPostRequire('updateSpringBootProjectMenu', this.sysMenu).then(response => {
            if (response) {
              this.$message({
                message: response.message,
                type: response.status ? 'success' : 'error'
              })
            }
            this.editMenuDialogVisible = false
          }).finally(() => {
            this.fetchProjectMenu()
          })
        }
      });
    },
    fetchProjectMenu() {
      projectPostRequire('getSpringBootProjectMenu', {'id': this.selectProjectId}).then(response => {
        if (response) {
          this.$message({
            type: response.status ? 'success' : 'error',
            message: response.message
          })
        }
        this.allMenuTree = response.data || []
      }).finally(() => {
        this.menuLoading = false
      })
    },
    handleCreateMenu(id) {
      this.menuLoading = true
      this.menuDialogVisible = true
      this.selectProjectId = id
      this.fetchProjectMenu()
    },
    handleResetSearch() {
      this.listQuery = this.$deepClone(defaultListQuery)
    },
    handleSearchList() {
      this.listQuery.current = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.current = 1
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.current = val
      this.getList()
    },
    handleAdd() {
      this.addDialogVisible = true
      this.project = this.$deepClone(defaultProject)
      this.backendProject = this.$deepClone(defaultBackendProject)
      this.frontendProject = this.$deepClone(defaultFrontendProject)
    },
    handleDelete(index, id) {
      this.$confirm('是否要删除该项目?前后端项目就会被一起删除！仅删除记录，文件仍会保留', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        projectPostRequire('delete', {'id': id}).then(response => {
          if (response) {
            this.$message({
              message: response.message,
              type: response.status ? 'success' : 'error'
            })
          }
        }).finally(() => {
          this.getList()
        })
      })
    },
    handleUpdate(type, row) {
      this.editOrShow = type
      this.editDialogVisible = true
      this.project = this.$deepClone(row)
      this.backendProject = this.$deepClone(row.backendProject)
      this.frontendProject = this.$deepClone(row.frontendProject)
    },
    checkDatasources() {
      let datasourceId = this.project.datasourceId;
      let mutilDatasourceId = this.project.mutilDatasourceId || [];
      if (mutilDatasourceId.indexOf(datasourceId) != -1) {
        this.$message.error('副数据源不能包含主数据源！');
        return false;
      }else if (mutilDatasourceId.length > 0){
        this.project.mutilDatasourceId = mutilDatasourceId.join(",");
      } else {
        this.project.mutilDatasourceId = undefined;
      }
      return true;
    },
    async handleEditDialogConfirm() {
      try {
        await this.validateForm('addProjectForm');
        await this.validateForm('addBackendProjectForm');
        await this.validateForm('addFrontendProjectForm');
        if (!this.checkDatasources()) {
          return;
        }

        // 所有表单校验通过，执行提交逻辑
        this.btnLoading = true

        if (this.project.additionComponentArr && this.project.additionComponentArr.length > 0) {
          this.project.additionComponent = this.project.additionComponentArr.toString()
        } else {
          this.project.additionComponent = ''
        }
        this.project.additionComponentArr = undefined
        let params = {
          project: JSON.stringify(this.project),
          backendProject: JSON.stringify(this.backendProject),
          frontendProject: JSON.stringify(this.frontendProject)
        }
        projectPostRequire('update', params).then(response => {
          if (response) {
            this.$message({
              message: response.message,
              type: response.status ? 'success' : 'error'
            })
          }
          this.editDialogVisible = false
        }).finally(() => {
          this.btnLoading = false
          this.getList()
        })
      } catch (error) {
        console.error(error.message);
      }
    },
    async validateForm(refName) {
      return new Promise((resolve, reject) => {
        this.$refs[refName].validate(valid => {
          if (valid) resolve(true);
          else reject(new Error(`${refName} 校验失败`));
        });
      });
    },
    async handleAddDialogConfirm() {
      try {
        await this.validateForm('addProjectForm');
        await this.validateForm('addBackendProjectForm');
        await this.validateForm('addFrontendProjectForm');
        if (!this.checkDatasources()) {
          return;
        }
        // 所有表单校验通过，执行提交逻辑
        this.btnLoading = true

        if (this.project.additionComponentArr && this.project.additionComponentArr.length > 0) {
          this.project.additionComponent = this.project.additionComponentArr.toString()
        } else {
          this.project.additionComponent = ''
        }
        this.project.additionComponentArr = undefined
        let params = {
          project: JSON.stringify(this.project),
          backendProject: JSON.stringify(this.backendProject),
          frontendProject: JSON.stringify(this.frontendProject)
        }
        projectPostRequire('add', params).then(response => {
          if (response) {
            this.$message({
              message: response.message,
              type: response.status ? 'success' : 'error'
            })
          }
          this.addDialogVisible = false
        }).finally(() => {
          this.btnLoading = false
          this.getList()
        })
      } catch (error) {
        console.error(error.message);
      }
    },
    getDatasourceList() {
      projectDatasourcePostRequire('listAll').then(response => {
        this.datasourceOption = response.data || []
      })
    },
    getList() {
      this.listLoading = true
      projectPostRequire('listPage', this.listQuery).then(response => {
        this.listLoading = false
        let listArr = response.data.records || []
        let projectConfigChangeArr = response.projectConfigRecord || []
        if (projectConfigChangeArr.length > 0) {
          let idToProjectConfig = {}
          for (let i = 0; i < projectConfigChangeArr.length; i++) {
            let temp = projectConfigChangeArr[i]
            idToProjectConfig[temp.projectId] = temp
          }
          for (let i = 0; i < listArr.length; i++) {
            const item = listArr[i]

            if (item.mutilDatasourceId && item.mutilDatasourceId.length > 0){
              let arr = item.mutilDatasourceId.split(",") || []
              item.mutilDatasourceId = arr.map(Number)
            }

            let hasTips = false
            let initFlag = ''
            let backRebuildTable = ''
            let frontRebuildTable = ''
            let rebootFlag = ''
            if (item.id in idToProjectConfig) {
              let currentProjectConfig = idToProjectConfig[item.id]
              if (currentProjectConfig.initFlag) {
                if (currentProjectConfig.initFlag.indexOf("front") != -1) {
                  initFlag += '【前端】'
                }
                if (currentProjectConfig.initFlag.indexOf("back") != -1) {
                  initFlag += '【后端】'
                }
              }
              if (currentProjectConfig.backRebuildTables) {
                backRebuildTable = currentProjectConfig.backRebuildTables
                if (backRebuildTable.startsWith(",")) {
                  backRebuildTable = backRebuildTable.substring(1)
                }
              }
              if (currentProjectConfig.frontRebuildTables) {
                frontRebuildTable = currentProjectConfig.frontRebuildTables
                if (frontRebuildTable.startsWith(",")) {
                  frontRebuildTable = frontRebuildTable.substring(1)
                }
              }
              if (currentProjectConfig.rebootFlag) {
                if (currentProjectConfig.rebootFlag.indexOf("front") != -1) {
                  rebootFlag += '【前端】'
                }
                if (currentProjectConfig.rebootFlag.indexOf("back") != -1) {
                  rebootFlag += '【后端】'
                }
              }

              if (initFlag || backRebuildTable || frontRebuildTable || rebootFlag) {
                hasTips = true
              }
            }
            item.hasTips = hasTips
            item.initFlag = initFlag
            item.backRebuildTable = backRebuildTable
            item.frontRebuildTable = frontRebuildTable
            item.rebootFlag = rebootFlag
          }
        }
        this.list = listArr
        this.total = response.data.total
      })
    },
    getAllTemplate() {
      this.listLoading = true
      templateConfigPostRequire('getAllTemplate').then(response => {
        this.listLoading = false
        let allTemplate = response.data || []
        let allTemplateSelect = []
        let allTemplateDesc = {}
        allTemplate.forEach(t => {
          allTemplateSelect.push({label: t.templateName, value: t.templateName})
          let additionJson = {}

          let additionList = t.addition || []
          additionList.forEach(a => {
            additionJson[a.name] = a.desc
          })

          t.additionJson = additionJson
          allTemplateDesc[t.templateName] = t

        })
        this.allTemplateSelect = allTemplateSelect;
        this.allTemplateDesc = allTemplateDesc;

      })
    },
    handleDialogClose(formName) {
      if (this.$refs[formName]) {
        this.$refs[formName].clearValidate()
      }
    },
    deleteTips(projectId, type) {
      projectConfigRecordPostRequire('deleteTips', {projectId: projectId, type: type}).then(response => {
        this.getList()
      })

    },
  }
}
</script>
<style>
.tips {
  color: red;
}

.el-badge__content.is-fixed {
  -webkit-transform: translateY(0%) translateX(100%) !important;
}

.icon-border {
  border: 1px solid #0024fc;
  margin-right: 5px;
}

.demo-table-expand label {
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-left: 10px;
  width: 100%;
}

.menu-select {
  cursor: pointer;
  color: blue;
  text-decoration: underline
}
</style>
